<template>
    <div class="citybig wrap" ref="wrapper">
        <div>
            <div class="cityfixed">
                <div class="cityfg">
                    <p>当前城市</p>
                </div>
                <div class="citycurr">
                    <span>{{this.$store.state.currcity}}</span>
                </div>
                <div class="cityfg">
                    <p>热门城市</p>
                </div>
                <div class="cityhot">
                    <span v-for="(v,i) in hotCities" :key="i" @click="ctyhandler(v.name)">{{v.name}}</span>
                </div>
                <div class="cityshi">
                    <div class="citylist" v-for="(v,i) in cities" :key="i">
                        <h5 ref="alptitle">{{i}}</h5>
                        <p v-for="(j,i) in v" :key="i" @click="ctyhandler(j.name)">{{j.name}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Bscroll from 'better-scroll'
    export default {
        name: 'cityfixed',
        props: ['cities', 'hotCities','alpindex'],
        data() {
            return {}
        },
        methods: {
            ctyhandler(v) {
                this.$store.commit('ctyclick', v);
                try {
                    localStorage.setItem('fiexcity', v)
                } catch (err) {
                    console.log(err)
                }
                this.$router.push({
                    path: '/'
                })
            }
        },
        mounted() {
            this.scroll = new Bscroll(this.$refs.wrapper, {
                click: true
            })
        },
        watch: {
            alpindex: function(newindex) {
                //如果是默认的空字符串 不用进行滚动
                if (newindex === '') {
                    return;
                }
                //组件帮我们滚动到对应dom的位置
                this.scroll.scrollToElement(this.$refs.alptitle[newindex]);
            }
        }
    }
</script>

<style scoped>
     ::-webkit-scrollbar {
        display: none;
        /*隐藏滚轮*/
    }
    .wrap {
        overflow-y: scroll;
        position: absolute;
        width: 100%;
        top: 176px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .citycurr span {
        font-size: 26px;
        display: inline-block;
        height: 26px;
        margin: 24px 18px;
        padding: 12px 74px;
        border: 1px solid #d9d9d9;
    }
    .cityfg p {
        height: 28px;
        color: #858585;
        padding: 10px 22px;
        background: #eeeeee;
    }
    .cityhot span {
        font-size: 26px;
        display: inline-block;
        height: 26px;
        margin: 0 16px 18px 16px;
        padding: 12px 74px;
        border: 1px solid #d9d9d9;
    }
    .cityhot span:first-child {
        margin-top: 18px;
    }
    .citylist h5 {
        height: 28px;
        line-height: 28px;
        color: #858585;
        padding: 10px 22px;
        background: #eeeeee;
        border-bottom: 1px solid #ececec;
    }
    .citylist>p {
        font-size: 28px;
        height: 28px;
        padding: 20px 20px;
        border-bottom: 1px solid #ececec;
    }
    .cityabc li {
        font-family: Arial, Microsoft Yahei, Helvetica Neue, Helvetica, sans-serif;
        font-size: 24px;
        color: #34c9dd;
        line-height: 38px;
    }
</style>
